<style lang="scss">
  @import '@/assets/css/variable';
  .my{
    position: absolute;
    top: 0;
    bottom: $tabbar-height;
    width: 100%;
    background-color: $main-bgc;
    min-height: 100%;
    font-size: 1.2rem;
    overflow: auto;
    box-sizing: border-box;
    .top-box{
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: white;
      .info{
        display: flex;
        align-items: center;
        .info-center{
          display: flex;
          flex-direction: column;
        }
        .name{
          font-size: 1.6rem;
          margin-left: 1rem;
          font-weight: bold;
        }
      }
      .vip{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        .xufei{
          color:#999;
        }
      }
    }
    .fans-data-box{
      background-color: white;
      .data-title{
        font-size: 1.6rem;
        font-weight: bold;
      }
      .fans-info{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .box-item{
          // margin-top: 1.8rem;
          .cap-title{
            color: $color-subtitle;
            font-size: 1.4rem;
          }
          .num{
            margin-top: 1rem;
            font-size: 1.5rem;
            font-weight: bold;
          }
        } 
      }
    }
    .yue-data-box{
      background-color: white;
      .box{
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
    .function-box{
      background-color: white;
    }
  }
</style>
<template>
  <div class="my" v-if="userInfo">
    <div class="top-box padding-all-l">
      <div class="info">
        <van-image
          round
          width="4rem"
          height="4rem"
          :src="userInfo.avatar || userInfo.door_header"
        />
        <div class="info-center">
          <span class="name">{{userInfo.nickname || userInfo.name}}</span>
          
        </div>
      </div>
      
      <div class="vip" v-if="userInfo.vip_status==2" @click="toVIPView">
         <span class="fs-14" :style="{color:$store.getters.getMasterColor}">VIP商户</span>
         <span class="margT-l xufei">{{userInfo.vip_time.substr(0,10)}}</span>
      </div>
      <div class="vip" v-else>
          <van-button :color="$store.getters.getMasterColor" size="mini" @click="toVIPView">立刻购买</van-button>
          <div class="color-s margT-m">客流裂变模板</div>
      </div>
    </div>
    <div class="fans-data-box margT-l padding-all-l">
      <!-- <div class="data-title">今日数据</div> -->
      <div class="fans-info">
        <div class="box-item">
          <div class="cap-title">总粉丝数</div>
          <div class="num">{{myInfo.join_num || 0}}</div>
        </div>
        <div class="box-item">
          <div class="cap-title">今日下单</div>
          <div class="num">{{myInfo.order || 0}}</div>
        </div>
        <div class="box-item">
          <div class="cap-title">账户余额</div>
          <div class="num">{{myInfo.unsettle || 0.00}}</div>
        </div>
      </div>
    </div>
    <!-- <div class="yue-data-box margT-l padding-all-l">
      <div class="box">
        <div class="title fs-14">账户余额</div>
        <div class="value">1000</div>
      </div>
    </div> -->
    <div class="function-box margT-l">
      <!-- <van-cell title="扫码核销" is-link @click="scanCode"/> -->
      <van-cell title="我要提现" is-link to="getMoney"/>
      <van-cell title="商户管理" is-link to="merchant"/>
      <van-cell title="核销员管理" is-link to="staffManage"/>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { Image as VanImage, Toast, Dialog } from 'vant';
import { Button } from 'vant';
import { Cell, CellGroup } from 'vant';
import {myMixins} from "@/assets/js/mixins.js"
// import wx from 'weixin-js-sdk';
export default {
  name: "My",
  mixins: [myMixins],
  components: {
    [Button.name]: Button,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Dialog.name]: Dialog,
    VanImage
  },
  data () {
    return {
      openid: '',
      userInfo: '',
      myInfo: ''
    }
  },
  mounted () {
    // document.title = '个人中心'
    // this.getTypeNum(this.form.introduce)
    if (process.env.NODE_ENV == 'production') { //线上环境
      this.openid = localStorage.getItem("OPENID") || "没获取到"
    }else{
      this.openid = this.$store.state.openid || localStorage.getItem("OPENID")
    }
    if(this.openid=='undefined'||!this.openid||this.openid==undefined){
      window.location.href = "https://www.umiyun.net/addons/youmi_activitys/public/mobile/index.html"
      return
    }
    // on close
    this.getMerchantItem()
    this.getMerchantItems()
    this.configItemShare()
    // this.myInfo = this.$store.state.myInfo
    // if(!this.myInfo){
    //   this.getMerchantItems()
    // }
    // this.userInfo = this.$store.state.userInfo
    // if(!this.userInfo){
    //   this.getMerchantItem()
    // }
  },
  methods: {
    toVIPView(){
      this.$router.push('/vip');
    },
    // 获取个人中心的总粉丝数据和今日下单量
    getMerchantItems() {
      let params = {
        openid: this.openid
      }
      this.$request.getMerchantItems(params).then(res=>{
        if(res.ret == 200){
          this.myInfo = res.data
          this.$store.commit("setMyInfo", this.myInfo)
        }else{
          
        }
      })
    },
    getMerchantItem() {
      const toast = Toast.loading({
        forbidClick: true,
        message: '加载中...',
      });
      let params = {
        openid: this.openid
      }
      console.log("params",params)
      this.$request.getMerchantItem(params).then(res=>{
        console.log("params_res",res)
        if(res.data.id){
          this.userInfo = res.data
          this.$store.commit('setUserInfo', this.userInfo)
        }else {
          //  Toast("请先去添加商户")
          this.userInfo = this.$store.state.userInfo
          Dialog.alert({
            title: '系统提示',
            message: '请先去添加商户！',
          }).then(() => {
            // on close
            this.$router.push('merchant')
          });
          
        }
        toast.clear()
      })
    },
    scanCode() {
      let url = location.href;
      getjssdk(url).then(res => {
        if (res.result == 1 && res.value) {
          let w = res.value;
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: w.appId, // 必填，公众号的唯一标识
            timestamp: w.timestamp, // 必填，生成签名的时间戳
            nonceStr: w.nonceStr, // 必填，生成签名的随机串
            signature: w.signature, // 必填，签名
            jsApiList: ["scanQRCode"] // 必填，需要使用的JS接口列表
          });
          wx.scanQRCode({
            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
            scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
            success: function(res) {
              var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
              // alert("扫码识别到的codes："+result);
              window.location.href = result;
            }
          });
        }
      }).catch(err => {});
    }
  }
};
</script>
